<template>
  <div class="shopNav">
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" @click='goCart' v-if="cartList.length==0" :badeg=0 />
      <van-goods-action-icon icon="cart-o" text="购物车" @click='goCart' v-else :badge="cartList.length"  />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="nowCart" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from "vue";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

export default {
  data(){
    return{
       cartList:this.$store.state.cartList
    }
  },
  props: {
    obj: {
      type: Object,
    },
  },
  methods: {
    nowCart() { //立即购买 点击将商品信息加入vuex中并跳转到购物车
      this.$router.push("/cart");
      let obj = this.$store.state.proSelectObj;
      this.$store.commit("addCartList",obj);
      // console.log(obj);
    },
    addCart() { //加入购物车 点击将商品信息加入vuex中
      let obj = this.$store.state.proSelectObj;
      this.$store.commit("addCartList",obj);
      // console.log(obj);
    },
    goCart(){ //仅跳转到购物车 
      this.$router.push("/cart");
    }
  },
};
</script>

<style scoped lang='scss'>
</style>